<template>
  <div class="wrapper">
    <a-form v-if="options" :labelAlign="'left'">
      <a-row :gutter="24">
        <a-col :lg="6" :md="12" :sm="24" v-for="(item, index) in options" :key="index">
          <a-form-item v-bind="formItemLayout" :label="item.ConditionName">
            <a-select showSearch optionFilterProp="children" @change="value => change(value, item.ParamName)" allowClear v-decorator="[{ initialValue: item.DropDownLists[0].Value }]">
              <a-select-option v-for="itema in item.DropDownLists" :value="itema.Value" :key="itema.Value">{{ itema.Name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div id="chart" class="chartDiv"></div>
  </div>
</template>

<script>
import { analysis } from '@/api/analysis'
import echarts from 'echarts'
export default {
  components: {},
  props: {
    chartData: {
      type: Object,
      default: null
    },
    content: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      option: null,
      options: null,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      params: {},
      data: null
    }
  },
  watch: {
    dataChange: {
      handler: function(newval, oldval) {
        this.initData2()
      },
      deep: true
    },
    chartDataChange: {
      handler: function(newval, oldval) {
        this.initData()
      },
      deep: true
    }
  },
  computed: {
    dataChange() {
      return this.data
    },
    chartDataChange() {
      return this.chartData
    }
  },
  methods: {
    initData() {
      const dataSource = this.chartData
      if (dataSource) {
        this.initChart(dataSource)
      }
    },
    initData2() {
      const dataSource = this.data
      if (dataSource) {
        this.initChart(dataSource)
      }
    },
    initChart(dataSource) {
      if (dataSource.Datas.length > 0) {
        this.options = dataSource.Conditions
        this.chart = echarts.init(document.getElementById('chart'), 'light')
        this.option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: dataSource.Datas.map(res => {
                return res.Name
              }),
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              minInterval: 1
            }
          ],
          series: [
            {
              name: '人数',
              type: 'bar',
              barWidth: '60%',
              data: dataSource.Datas.map(res => {
                return res.Value
              })
            }
          ]
        }
        // 绘制图表
        this.chart.setOption(this.option, true)
        // setTimeout(() => {
        //   window.onresize = function() {
        //     if (this.chart) {
        //       this.chart.resize()
        //     }
        //   }
        // }, 1000)
      } else {
        this.chart.clear()
      }
    },
    change(value, name) {
      let keyValues = []
      this.params[name] = value
      for (let prop in this.params) {
        let keyValue = {}
        keyValue.Name = prop
        keyValue.Value = this.params[prop]
        keyValues.push(keyValue)
      }
      analysis(this.content, keyValues).then(res => {
        this.data = res.data
      })
    }
  },
  created() {
    // setTimeout(() => {
    //   this.data = this.chartData
    //   this.initChart()
    // }, 1000)
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.tree-select-label {
  display: inline-block;
  height: 30px;
  font-size: 12px;
  vertical-align: bottom;
  text-align: center;
}
.tree-select-self-FX {
  display: inline-block;
  width: 200px;
}
.chartDiv {
  height: 500px;
  margin: 0 auto;
}
</style>
